<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单元素</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/stv/admin/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/stv/admin/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/stv/admin/ztree/css/zTreeStyle/zTreeStyle.css" media="all">
    <style>
        .ztree .node_name {
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            font-size: 14px;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 微软雅黑, Tahoma, Arial, sans-serif;
        }

        .ztree li {
            line-height: 28px;
        }

        .ztree li a {
            height: 28px;
            color: #666;
            font-weight: normal;
        }

        .ztree li a:hover {
            text-decoration: none;
            color: #FF5722;
        }

        .ztree li a.curSelectedNode {
            padding: 1px 3px 0 0;
            margin: 0;
            cursor: pointer;
            vertical-align: top;
            display: inline-block;
            height: 28px;
            border: none;
            background-color: #F0F0F0;
            color: #FF5722;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">

            <div class="layui-card">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title"
                            style="padding:0;text-align:center;height:39px;line-height:39px;">参数分类</h2>
                        <div class="layui-colla-content layui-show">
                            <div class="input-search mb-10" style="display: none;">
                                <input type="text" class="layui-input layui-input-sm"
                                       style="border-radius: 15px;"
                                       id="jstree_left_search" name="jstree_left_search"
                                       placeholder="快速查找...">
                            </div>
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-col-md9">
            <form id="main_form" class="layui-form layui-form-pane" action="" lay-filter="component-form-element">
                <div class="layui-card">
                    <div class="layui-tab layui-tab-card" lay-filter="tab_form">
                        <ul class="layui-tab-title">
                            <li class="layui-this" lay-id="1">基本设置</li>
                            <li lay-id="2">说明文档</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <!-- 隐藏域: id -->
                                <input type="hidden" id="id" name="id" class="input_id" value="" />

                                <div class="layui-form-item">
                                    <label class="layui-form-label">所属上级</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="pname" name="pname"
                                               lay-verify="required"
                                               autocomplete="off" value="顶级节点"
                                               class="layui-input" readonly="readonly">
                                        <!-- 隐藏域: parentid -->
                                        <input type="hidden" id="pid" name="pid" value="0">
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-primary"
                                            id="parent_select">
                                        选择上级
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary"
                                            id="parent_set_root">
                                        设为顶级
                                    </button>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" lay-verify="required"
                                               placeholder="请输入名称"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-primary"
                                            id="icon_select">
                                        <i class='layui-icon layui-icon-search'></i>
                                    </button>
                                    <!-- 隐藏域: icon -->
                                    <div class="layui-input-inline">
                                        <input type="text" id="icon_css" name="icon" class="layui-input"
                                               value="fa fa-file-o">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">排序</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="list_order" value="50"
                                               lay-verify="required|number"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">升序 数字越小越靠前，必须大于0</div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">是否显示</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" name="status"
                                               checked   lay-skin="switch" lay-text="显示|关闭" value="1">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">操作菜单是否显示，一般需要显示</div>
                                </div>


                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">其它信息</label>
                                    <div class="layui-input-block">
                                        <textarea name="tip" placeholder="请输入其它信息" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                            </div>



                            <div class="layui-btn-container">
                                <button class="layui-btn" lay-submit lay-filter="component-form-element">
                                    保存
                                </button>
                                <button class="layui-btn layuiadmin-btn-list layui-btn-danger" data-type="del_menu">删除
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <button class="layui-btn layuiadmin-btn-list layui-btn-warm" data-type="subadd">
                                    添加子菜单
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

<script src="/static/stv/admin/layuiadmin/layui/layui.js"></script>
<script src="/static/stv/admin/ztree/js/jquery-1.4.4.min.js"></script>
<script src="/static/stv/admin/ztree/js/jquery.ztree.core.js"></script>
<script>
    var index_url = "{:url('admin/config/index')}";
    var save_url="{:url('admin/config/classsave')}";
    var edit_url="{:url('admin/config/classedit')}";
    var del_url="{:url('admin/config/classdel')}";
    var select_menu_url="{:url('admin/config/class_show_select_menus')}";
    var select_icon_url = '/static/stv/admin/html/select_icon.html';
    var submit_form;
    var menu_tree;
    var pname='顶级菜单';
    layui.config({
        base: '/static/stv/admin/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var   $ = layui.jquery
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;
        //=========================按钮事件=======================
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });
        $('#parent_select').click(function () {

            var index = layer.open({
                type: 2
                , title: '上级菜单选择'
                , content: select_menu_url
                , area: ['320px', '550px'] //宽高
                , scrollbar: false
                //, shadeClose: true //点击浮层关闭
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    //先获取子页面的body对象
                    var iframe_body = layer.getChildFrame('body', index);
                    var select_menu_id_value = iframe_body.find('input[name="select_menu_id"]').val();

                    if (select_menu_id_value > 0) {
                        $('#pid').val(select_menu_id_value);
                        $('#pname').val(iframe_body.find('input[name="select_menu_name"]').val());
                    } else {
                        show_warn('您未选择任何菜单');
                    }
                    layer.close(index);
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                    show_warn('您未选择任何菜单');
                }
            });

        });

        $('#icon_select').click(function () {

            var index = layer.open({
                type: 2
                , title: '图标选择:'
                , content: select_icon_url
                , area: ['80%', '500px'] //宽高
                , scrollbar: false
                , cancel: function (index, layero) {
                }
            });

        });

        $('#parent_set_root').click(function () {
            submit_form.val("component-form-element",{name:'',list_order:50,status:1,tip:'',id:'',pid:0,pname:'顶级节点'});
        });
        var active = {
            del_menu: function(){
                var selectedNodes = menu_tree.getSelectedNodes();
                //删除操作
                layer.confirm('确定删除吗?', function (index) {
                    //提交数据
                    //提交数据
                    var o = { id: selectedNodes[0].id};
                    $.post(del_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                layer.msg('删除成功', {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 3000
                                },function(){
                                    location.reload();
                                });
                                //重新刷新父窗口的数据区

                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    },"json");

                    //关闭自身提示框
                    layer.close(index);
                });
                return false;
            },
            subadd: function(){
                var id=$(".input_id").val();
                //清空表单元素值
                submit_form.val("component-form-element",{name:'',list_order:50,status:1,tip:'',id:'',pid:id,pname:pname});
                return false;
            },
            selecticon:function(){
                layer.msg("aaaaaaaaaa");
                return false;
            }
        };
        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');

        form.on('submit(component-form-element)', function(data){
            $.post(save_url, data.field, success, "json");
            return false;
        });

        //========================表单数据返回处=====================================
        function success(res){
            if(res.status==200){
                layer.msg('保存成功', {
                    offset: '15px'
                    , icon: 1
                    , time: 3000
                }, function () {
                    location.href = index_url //登录历史
                });
            }else{
                layer.msg("操作失败");
            }
        }
        submit_form=form;

    });
    //设置图标
    function set_icon_css(value) {
        $('#icon_select').html("<i class='" + value + "'></i>");
        $('#icon_css').val(value);
    }
</script>

<SCRIPT type="text/javascript">


    <!--
    var setting = {
        view: {
            nameIsHTML: true,
            showIcon: false,
            showLine: true,
            txtSelectedEnable: false,
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {

            onClick: onClick
        }
    };

    var zNodes ={$menu_list|raw};
    var  className = "dark";

    //自定义节点
    function addDiyDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        var addStr = "<i class='" + treeNode.icon + "'></i>&nbsp;";
        //在节点前加入 ICON 图标
        sObj.before(addStr);
        var addStr = "&nbsp;(" + treeNode.id + ")";
        sObj.after(addStr);
    }
    function onClick(event, treeId, treeNode, clickFlag) {
        $.ajax({
            type: 'POST',
            url: edit_url,
            data: {id:treeNode.id},
            async: false,
            dataType: 'json',
            success: function (res) {
                if (res.status==200) {
                    pname=res.data.name;
//========================表单数据宣染=====================================
                    submit_form.val("component-form-element",res.data);
                } else {
                    layer.msg(res.message);
                }
            },
            error: function () {
                layer.msg("异常");
            }
        });
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds();
        return (h+":"+m+":"+s);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var treeId = "treeDemo";
        var    treeObj = $.fn.zTree.getZTreeObj(treeId);
        menu_tree=treeObj;
        treeObj.expandAll(true);
    });
    //-->
</SCRIPT>
</body>
</html>
